<!DOCTYPE html>
<html ng-app="app">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="css/reset.css">
		<style type="text/css">
			html {
				width: 100%;
				height: 100%;
			}
			
			body {
				text-align: left;
				width: 100%;
				background-color: #e9dfc7;
				-moz-user-select: none;
				-webkit-user-select: none;
				user-select: none;
				font-family: arial, microsoft yahei, helvetica, sans-serif;
				font-size: 14px;
				color: #555;
				line-height: 1.5em;
			}
			
			.hide {
				display: none !important;
			}
			
			.m-read-content {
				font-size: 14px;
				color: #555;
				line-height: 31px;
				padding: 15px;
			}
			
			.m-read-content h4 {
				font-size: 20px;
				color: #736357;
				border-bottom: solid 1px #736357;
				margin: 0 0 1em 0;
				letter-spacing: 2px;
			}
			
			.m-read-content p {
				text-indent: 2em;
				margin: 0.5em 0;
				letter-spacing: 0px;
				line-height: 24px;
			}
			
			.m-button-bar {
				width: 70%;
				max-width: 800px;
				padding: 5px 15% 70px;
				margin: 0 auto;
			}
			
			.u-tab {
				height: 34px;
				margin: 10px auto;
				line-height: 34px;
				border-radius: 8px;
				font-size: 12px;
				background-color: rgba(0, 0, 0, .8);
			}
			
			.u-tab li {
				box-sizing: border-box;
				display: inline-block;
				width: 49%;
				text-align: center;
				color: #F8F8F8;
			}
			
			.u-tab li+li {
				border-left: 1px solid #858382;
			}
			
			.top-nav {
				position: fixed;
				top: 0;
				width: 100%;
				height: 50px;
				z-index: 99;
				background-color: #000;
			}
			
			.icon-back {
				position: absolute;
				top: 14px;
				left: 10px;
				width: 23px;
				height: 23px;
				background: url();
				background-size: contain;
			}
			
			.nav-title {
				position: absolute;
				top: 14px;
				left: 42px;
				color: #d5d5d6;
			}
			
			.bottom-nav {
				position: fixed;
				z-index: 99;
				height: 70px;
				bottom: 0;
				width: 100%;
				background-color: rgba(0, 0, 0, .8);
				display: flex;
			}
			
			.bottom-nav>.item {
				flex: 1;
				height: 100%;
				text-align: center;
			}
			
			.item .item-warp {
				width: 26px;
				margin: 0 auto;
				position: relative;
			}
			
			.icon-text {
				position: absolute;
				top: 35px;
				font-size: 10px;
				color: #fff;
			}
			
			.icon-menu,
			.icon-ft,
			.icon-night,
			.icon-day {
				position: absolute;
				top: 13px;
				left: 2px;
				width: 18px;
				height: 13px;
			}
			
			.icon-menu {
				background: url();
				background-size: contain;
			}
			
			.icon-ft {
				width: 20px;
				height: 13px;
				background: url();
				background-size: contain;
			}
			
			.icon-night {
				width: 16px;
				height: 16px;
				background: url();
				background-size: contain;
			}
			
			.icon-day {
				width: 16px;
				height: 16px;
				background: url();
				background-size: contain;
			}
			
			.icon-day,
			.icon-night {
				left: 5px;
			}
			
			.nav-pannel {
				position: fixed;
				bottom: 69px;
				height: 135px;
				background: none;
				width: 100%;
				color: #fff;
				z-index: 99;
				background-color: rgba(0, 0, 0, .8);
			}
			
			.child-mod {
				padding: 5px 10px;
				margin: 15px;
			}
			
			.child-mod span {
				display: inline-block;
				padding-right: 20px;
				padding-left: 10px;
			}
			
			.child-mod button {
				background: none;
				border: 1px #8c8c8c solid;
				padding: 5px 40px;
				color: #fff;
				display: inline-block;
				border-radius: 16px;
				outline: none;
			}
			
			.child-mod button+button {
				margin-left: 10px;
			}
			
			.bk-container {
				position: relative;
				height: 25px;
				width: 25px;
				background: #fff;
				border-radius: 15px;
				display: inline-block;
				vertical-align: -7px;
			}
			
			.bk-container+.bk-container {
				margin-left: 5px;
			}
			
			.bk-container.active:before {
				content: '';
				position: absolute;
				height: 27px;
				width: 27px;
				border-radius: 16px;
				display: inline-block;
				vertical-align: -14px;
				margin-left: 10px;
				border: 1px solid #ff7800;
				top: -2px;
				left: -12px;
			}
			
			.artical-action-mid {
				position: fixed;
				top: 30%;
				height: 40%;
				width: 100%;
				z-index: 98;
			}
		</style>
	</head>

	<body>
		<div id="root" class="container">
			<div id="top-nav" class="top-nav hide">
				<div class="icon-back"></div>
				<div class="nav-title">返回书架</div>
			</div>
			<div id="fiction_chapter_title" class="">

			</div>
			<!--放在页面中间隐藏的操作层-->
			<div class="m-artical-action">
				<div class="artical-action-mid" id="action_mid"></div>
			</div>

			<div id="fiction_container" class="m-read-content">

			</div>

			<div class="m-button-bar">
				<ul class="u-tab">
					<li id="prev_button">上一章</li>
					<li id="next_button">下一章</li>
				</ul>
			</div>
			<!---->
			<div class="nav-pannel hide" id="font-container">
				<div class="child-mod">
					<span>字号</span>
					<button id="large-font" class="font-size-button">大</button>
					<button id="samll-font" class="font-size-button">小</button>
				</div>
				<div class="child-mod">
					<span>背景</span>
					<div class="bk-container" id="undefined" data-font="" data-bottomcolor="undefined" data-color="#f7eee5" style="background-color:#f7eee5">
					</div>
					<div class="bk-container active" id="font_normal" data-font="" data-bottomcolor="undefined" data-color="#e9dfc7" style="background-color:#e9dfc7">
					</div>
					<div class="bk-container" id="undefined" data-font="" data-bottomcolor="undefined" data-color="#a4a4a4" style="background-color:#a4a4a4">
					</div>
					<div class="bk-container" id="undefined" data-font="" data-bottomcolor="undefined" data-color="#cdefce" style="background-color:#cdefce">
					</div>
					<div class="bk-container" id="undefined" data-font="#7685a2" data-bottomcolor="#fff" data-color="#283548" style="background-color:#283548">
					</div>
					<div class="bk-container" id="font_night" data-font="#4e534f" data-bottomcolor="rgba(255,255,255,0.7)" data-color="#0f1410" style="background-color:#0f1410">
					</div>
				</div>
			</div>
			<!---->
			<div class="bottom-nav bottom_nav hide">
				<div class="item menu-button" id="menu_button">
					<div class="item-warp">
						<div class="icon-menu"></div>
						<div class="icon-text">
							目录
						</div>
					</div>
				</div>
				<div class="item" id="font-button">
					<div class="item-warp">
						<div class="icon-ft"></div>
						<div class="icon-text">
							字体
						</div>
					</div>
				</div>
				<div class="item" id="night-button">
					<div class="item-warp hide" id="day_icon">
						<div class="icon-day"></div>
						<div class="icon-text">
							白天
						</div>
					</div>
					<div class="item-warp" id="night_icon">
						<div class="icon-night"></div>
						<div class="icon-text">
							夜间
						</div>
					</div>
				</div>
			</div>

		</div>

		<script src="lib/zepto.min.js"></script>
		<script>
			window.jQuery = $;
		</script>
		<script src="js/jquery.base64.js"></script>
		<script src="js/jquery.jsonp.js"></script>

		<script>
			(function() {
				// 封装H5的本地存储
				var Util = (function() {
					var prefix = 'html5_reader_';
					var StoreageGetter = function(key) {
						return localStorage.getItem(prefix + key);
					}
					var StoreageSetter = function(key, val) {
						return localStorage.setItem(prefix + key, val);
					}
					// 获得章节数据
					var getBaseJson = function(url, callback) {
						return $.jsonp({
							url: url,
							cache: true,
							callback: 'duokan_fiction_chapter',
							success: function(result) {
								// result 就是base64加密的数据
								var data = $.base64.decode(result);
								var json = decodeURIComponent(escape(data));
								callback(json);
							}
						})
					}
					return {
						getBaseJson: getBaseJson,
						StoreageGetter: StoreageGetter,
						StoreageSetter: StoreageSetter
					}
				})();

				// 定义参数
				var Win = $(window);
				var Doc = $(document);
				var readerModel = null;
				var readerUI = null;
				var initFontSize = Util.StoreageGetter('font_size') || 14; // 初始字体大小
				var initBgColor = Util.StoreageGetter('bgColor') || '#f7eee5';
				var _chapter_id = Util.StoreageGetter('chapterId') || 0;
				var NavDom = {
					topNavBar: $('#top-nav'), // 顶部导航栏
					bottomNavBar: $('.bottom_nav'), // 底部导航栏
					menu_btn: $('#menu_button'), // 目录按钮
					font_setting: $('#font-button'), // 字体按钮
					night_day_toggle: $('#night-button'), // 白天夜间按钮
					font_setting_pannel: $('#font-container'), // 设置面板
					largeFont_btn: $('#large-font'), // 放大字体按钮
					samllFont_btn: $('#samll-font'), // 缩小字体按钮
					readContent: $('#fiction_container'), // 
				}

				NavDom.readContent.css('font-size', initFontSize + 'px'); // 初始化阅读器字体大小
				NavDom.readContent.css('background-color', initBgColor); // 初始化阅读器背景颜色
				$('.m-button-bar').css('background-color', initBgColor);
				
				// 当断当前选中的背景色
				$('.bk-container').each(function() {
					if($(this).attr('data-color') == initBgColor) {
						$(this).addClass('active').siblings().removeClass('active');
					}
				});

				function main() {
					// 整个项目的入口函数
					readerModel = ReaderModel();
					readerUI = ReaderBaseFrame(NavDom.readContent);
					readerModel.init(function(data) {
						readerUI(data);
					});

					EventHandle();
				}

				function ReaderModel() {
					// 实现和阅读器相关数据交互的方法
					var _totalChapter = 0;
					var init = function(UIcallback) {
						getFictionInfo(function() {
							getCurrentChapterContent(_chapter_id, function(data) {
								UIcallback && UIcallback(data);
							})
						})
					}
					var getFictionInfo = function(callback) {
						$.get('./data/chapter.json', function(data) {
							// 获取章节内容
							_totalChapter = data.chapters.length;
							callback && callback();
						}, 'json');
					}

					var getCurrentChapterContent = function(chapter, callback) {
						$.get('data/data' + _chapter_id + '.json', function(data) {
							if(data.result == 0) {
								var url = data.jsonp; // jsonp地址
								Util.getBaseJson(url, function(data) {
									callback && callback(data);
								});
							}
						}, 'json');
					}

					var precChapter = function(UIcallback) {
						_chapter_id = parseInt(_chapter_id, 10);
						if(_chapter_id == 1) return;
						_chapter_id--;
						getCurrentChapterContent(_chapter_id, UIcallback);
						// 本地保存当前章节
						Util.StoreageSetter('chapterId', _chapter_id);
					}

					var nextChapter = function(UIcallback) {
						_chapter_id = parseInt(_chapter_id, 10);
						// _chapter_id == _totalChapter
						if(_chapter_id == 4) return;
						_chapter_id++;
						getCurrentChapterContent(_chapter_id, UIcallback);
						// 本地保存当前章节
						Util.StoreageSetter('chapterId', _chapter_id);
					}
					return {
						init: init,
						precChapter: precChapter,
						nextChapter: nextChapter
					}
				}

				function ReaderBaseFrame(container) {
					// 渲染基本的UI结构
					function parseChapter(jsonData) {
						var jsonObj = JSON.parse(jsonData);
						var html = '<h4>' + jsonObj.t + '</h4>';
						for(var i = 0; i < jsonObj.p.length; i++) {
							html += '<p>' + jsonObj.p[i] + '</p>';
						}
						return html;
					}
					return function(data) {
						container.html(parseChapter(data));
					}
				}

				function EventHandle() {
					// 交互的事件绑定
					document.getElementById('action_mid');
					$('#action_mid').click(function() {
						if(NavDom.topNavBar.hasClass('hide')) {
							NavDom.topNavBar.removeClass('hide');
							NavDom.bottomNavBar.removeClass('hide');
						} else {
							NavDom.topNavBar.addClass('hide');
							NavDom.bottomNavBar.addClass('hide');
							NavDom.font_setting_pannel.addClass('hide');
						}
					});
					// 白天夜间模式切换
					NavDom.night_day_toggle.click(function() {
						if($('#day_icon').hasClass('hide')) {
							$('#day_icon').removeClass('hide');
							$('#night_icon').addClass('hide');
							initBgColor = $('#font_normal').attr('data-color');
							NavDom.readContent.css('background-color', initBgColor);
							$('.m-button-bar').css('background-color', initBgColor);
							$('#font_normal').addClass('active').siblings().removeClass('active');
							Util.StoreageSetter('bgColor', initBgColor);
						} else {
							$('#day_icon').addClass('hide');
							$('#night_icon').removeClass('hide');
							initBgColor = $('#font_night').attr('data-color');
							NavDom.readContent.css('background-color', initBgColor);
							$('.m-button-bar').css('background-color', initBgColor);
							$('#font_night').addClass('active').siblings().removeClass('active');
							Util.StoreageSetter('bgColor', initBgColor);
						}
					});
					// 点击目录
					NavDom.menu_btn.click(function() {
						alert('目录');
					});
					// 打开关闭字体设置面板
					NavDom.font_setting.click(function() {
						NavDom.font_setting_pannel.toggleClass("hide");
					});
					// 增大字体
					NavDom.largeFont_btn.click(function() {
						if(initFontSize >= 24) return;
						initFontSize++;
						NavDom.readContent.css('font-size', initFontSize + 'px');
						Util.StoreageSetter('font_size', initFontSize);
					})
					// 缩小字体
					NavDom.samllFont_btn.click(function() {
						if(initFontSize <= 14) return;
						initFontSize--;
						NavDom.readContent.css('font-size', initFontSize + 'px');
						Util.StoreageSetter('font_size', initFontSize);
					})
					// 选择背景色
					$('.child-mod').on('click', '.bk-container', function() {
						initBgColor = $(this).attr('data-color');
						NavDom.readContent.css('background-color', initBgColor);
						$('.m-button-bar').css('background-color', initBgColor);
						$(this).addClass('active').siblings().removeClass('active');
						Util.StoreageSetter('bgColor', initBgColor);
					});

					$("#prev_button").click(function() {
						// 拿到数据，并渲染
						readerModel.precChapter(function(data) {
							readerUI(data);
						});
					})

					$("#next_button").click(function() {
						// 拿到数据，并渲染
						readerModel.nextChapter(function(data) {
							readerUI(data);
						})
					})
					// 页面滚动导航条消失
					Win.scroll(function() {
						if(!NavDom.topNavBar.hasClass('hide')) {
							NavDom.topNavBar.addClass('hide');
							NavDom.bottomNavBar.addClass('hide');
							NavDom.font_setting_pannel.addClass('hide');
						}
					})
				}

				main();
			})();
		</script>
	</body>

</html>